Apple Tweaks Website Design with Darker Navigation and Animations

[Boots-]

What I think this design is about, is that marble interface we heard a while back!

https://www.macrumors.com/2009/01/13/snow-leopard-to-bring-unifying-marble-user-interface/

Like the nav bar looks kind of like glass, marbles are made of glass.
Just a thought

 

[nyctravis]

Am I the only one who sees this as potentially a hint at the next round of Mac updates (or even the next iPad)? Perhaps after 8 (yes, EIGHT!) years of using the light "natural aluminum" look, Apple is thinking of changing the cases to a darker brushed aluminum finish?

This was my first thought as well! I suspect perhaps this is part of a hint at the new updates.

 

[fswmacguy]

Here's the skinny on the updated nav:

Apple used to use images with text for the nav. Now they use a repeating background (for the dark glossy nav background) and an image sprite.

Repeating background: http://images.apple.com/global/nav/images/globalheader.png

Image sprite: http://www.apple.com/global/nav/images/globalnav_text.png

CSS is used to pick out the part of the text sprite and stick it in the nav button.

So now, if their web team wants to adjust items in the nav menu, they only need to edit the text sprite, rather than having to edit an entire button sprite. Although, ideally, Apple would simply use @font-face to shuffle the required fonts to the user, and generate the nav text with HTML. But this would require them giving users access to the protected font.

 

[Slurpy2k8]

for a company that prides itself in beautiful products, Apple's website sure still looks like a piece of s***

Wow, I completely disagree. In my opinion it is one of the cleanest, most useable, most clear, and aesthetically pleasing sites on the internet. How could they improve it? Whenever they have a new/updated product, it gives me alot of joy to check out the new product pages. They're always gorgeously and brilliantly presented (while looking sexy as hell). The font choices and contrast of weights and sizes, spacings, etc is also well treated.

 

[acslater017]

ya your right you can see it fade in as you move up toward the top of the page

Good eye, but I believe that the canvas texture has been there for awhile now, maybe a month or two?

I concur with the other comments...I wonder what Lion UI elements can be gleaned from this

 

[KALLT]

It does not actually fit with the support page. They should have tweaked the entire website, not just the menu bar. Looks out of place to me. Also, I dislike that Apple uses HTML5 for everything now. They seem to follow the same direction that Flash once took, namely using it for purposes that don't require it.

 

[Ploki]

haha, they changed it. the fonts on the laptop are rendered at a fixed resolution, while on iOS safari, the fonts at the top are vector.
i always wondered why apple's site looks so crappy on iPhone4. i guess they wanted to address this as well.

 

[kiljoy616]

The white iphone 4 rumors live on!

and will never end, I figure iphone 5 the earliest which is when we should see Steve back again.

 

[hobbbz]

I'm too lazy to go much further but here's the future of OS X.

The previous lighter grey corresponded to Safari's/Tunes' UI. Consider this a foreshadowing of the next version of the OS.

I expect no scroll bar (iOS style), white text in the bar instead of the current black text.

This is why the stoplight is vertically centered now, the gloss with the sharp dividing line looks best with things vertically centered on it.

 

[acslater017]

Wow, I completely disagree. In my opinion it is one of the cleanest, most useable, most clear, and aesthetically pleasing sites on the internet. How could they improve it? Whenever they have a new/updated product, it gives me alot of joy to check out the new product pages. They're always gorgeously and brilliantly presented (while looking sexy as hell). The font choices and contrast of weights and sizes, spacings, etc is also well treated.

Yea, I agree. Apple.com is the most clear, clean, concise websites in the entire industry. They present all their products beautifully, providing information but in a logical, restrained way. It's perfectly logical how to learn about a product, view galleries, purchase, track shipping, etc.

Even iOS upgrades, accessories, and iLife updates get the royal treatment.

 

[Truffy]

Yeah, that 0.3 seconds of bouncing is a major distraction; the site's barely useable now

It serves no real purpose. As a one off it's OK, but repeated visits or page clicks just repeat the same old ****. And it does distract the eye. OK, so it's not as bad as animated GIF images, but not as good as the thing it replaced.

 

[URFloorMatt]

Am I the only one who sees this as potentially a hint at the next round of Mac updates (or even the next iPad)? Perhaps after 8 (yes, EIGHT!) years of using the light "natural aluminum" look, Apple is thinking of changing the cases to a darker brushed aluminum finish?

Hope they've got a way to make it distinct because I think Samsung beat them to the punch with their 9 series laptop.

The 9 Series is made from material known as Duralumin, typically found in advanced aircrafts and offers construction quality twice as durable as aluminum, all while keeping the laptop weight under 3 lbs. To develop the 9 Series with the use of this new material, Samsung created an exhaustive testing process to ensure that the notebook is not only extremely sturdy, but also constructed with the perfect look and feel for technology savvy users.

The Samsung looks very slick too. If it wasn't so expensive, I'd definitely pick one up for a Windows laptop.

 

[rdstoll]

WOW. This is absolutely mind-blowing news. Thank you SO MUCH for letting us know about these stunning color changes on Apple's website.

 

[Stella]

I like the new look - its clean, and the HTML5 transitions are nice too.

However, Apple are using webkit ( mozilla, and IE9? ) specific CSS. If Apple loves web standards so much, this is a "no no".. keep to w3c CSS.

The Search looks like its disabled.. it shouldn't be greyed out.

 

[Wayfarer]

<snip>

I'm too lazy to go much further but here's the future of OS X.

The previous lighter grey corresponded to Safari's/Tunes' UI. Consider this a foreshadowing of the next version of the OS.

I expect no scroll bar (iOS style), white text in the bar instead of the current black text.

This is why the stoplight is vertically centered now, the gloss with the sharp dividing line looks best with things vertically centered on it.

Thanks for this. Exactly what I had in mind, just didn't go as far as you did. Bravo! A few more touches, and it look will look quite nice. Can't wait until they unveil the minimalist scrollbars. :O

Ladies and gentlemen, this is all about "bringing it back" to the mac, increasing GUI consistency across Mac OS X and iOS and getting rid of fragmentation. Duh!

 

[Consultant]

<snip>Reminds me of vista.

Someone fails to understand Vista is a knockoff of Mac OS X.

 

[yahya4k]

It kinda looks... exactly the same.

 

[JGowan]

tzzzzzzzzzzzzzz

Doesn't display right in Safari of all things.

Bar is black, words supposedly to be inside bar inside bar are aligned 2 lines down.

And yes, tone in tone for search field is a snafu IMO

Needs some work

Following the Retina ipad discussion:

I won't be buying anything from the Apple site until they fix it all to my liking

Haters gonna hate
Lovers gonna love
I don't even want none of the above
I want...

 

[Lunic200]

Ouch, first they made this gloss-style so popular, and when everyone and
their dog copied it, they finally switched to something matte-looking,
which was a good decision.

Why do they now return to this most overused, gradient-plus-hard-
glossy-reflexion-aquabutton-thing again...
i mean it has been some time, but i still haven´t recovered, and expected
something more original from them

*and yes, if we´re unlucky, it is a sneak peak for the next MAC OS graphical changes too.

 

[iPhoneCollector]

Hello Lion UI, goodbye metal theme.

if lion looks like that it wont take long for me to rush in the store and buy it.

 

[fswmacguy]

However, Apple are using webkit ( mozilla, and IE9? ) specific CSS. If Apple loves web standards so much, this is a "no no".. keep to w3c CSS.

The Search looks like its disabled.. it shouldn't be greyed out.

The current state of the Mozilla transforms / transitions are only available in Firefox 4 beta. If I recall correctly, Apple is part of the W3C team and have been collaborating with other organizations on the HTML5 and CSS3 drafts.

 

[louis Fashion]

Darkness at the edge of town

this is totally what lion is going to look like. I can feel it (creepy psychic tone)

Darker Navigation....humm? SJ takes medical leave and THE DARKNESS starts. Is The Evil Google infiltrating?

 

[robotmonkey]

Someone fails to understand Vista is a knockoff of Mac OS X.

Someone fails to understand that intentionally moved away from the glossy stuff because vista (and everybody else and their dog) copied aqua and apple is always 3 steps ahead of everybody else in ui design, thus it is a step backwards to go back to the glossy design, and it makes it cheap to make it dark like vista. In fact, the new nav bar looks almost exactly like my old vista desktop.

It just confuses me that apple would release what appeared to be an experimental ui with itunes that I think makes the product look more mature and professional, only to ditch that look and go with Vista-esque bells and whistles.

 

[Aatos.1]

Wirelessly posted (Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_2 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7D11 Safari/528.16)

Apple store still not optimized for iPhone. Bravo Apple!

When viewed on my iPhone 4 it's mediocre.

When viewed on my Android powered HTC, with the new Sense UI & 4.3" Widescreen display it's beautiful.

 

[URFloorMatt]

Based on some of the negative comments here, you'd think Apple dipped every graphic on the website in a gloss effect. Personally, I think the added contrast looks really good with the paper-textured background they've been using since The Beatles announcement.

But way to be hypocritical about it, since the entire iOS interface is premised on gloss literally everywhere, and Microsoft avoided that entirely in Windows Phone. I don't see Vista here at all. I see iOS.