The New Header Design Above the Old

Amazon.com (or is it just Amazon now?) just redesigned the header across their site, along with a few other elements on the home page. Product pages seem untouched, aside from the new header. They’ve stripped almost all the color from the previously teal-blue header bar with orange buttons. It is now in shades of gray, with just a few select touches of color, some orange notification type and a few blue links. It looks bigger and less cluttered, yet is actually just a few pixels shorter.

No More .com, Uncolored Departments Menu

The .com has been dropped from logo at top left, and the type weight slightly adjusted so the name appears larger and clearer. The Shop by Department menu is now hidden until you pop it open, and submenus expand more uniformly with more rich content. The search bar now appears nearly twice as tall, with all elements (department selector and go buttton) integrated into a single visual element, much like Firefox’s recent Address Bar revisions. The cart button is a larger and much cleaner line graphic now without a text label.

Cart and Lists are separated from the integrated Search Bar

Front page “headline” banner type is now in gray, with highlights in only one color per piece, instead of gray with orange and blue, and the typeface is slightly lighter-weight and less narrow.

Lighter, less-compressed typeface, fewer colors.

This feels very much like what Google has been doing to their products. I’m a fan of these clean, tailored designs. Stripping the old-web glitter, decluttering, combining elements, and making things larger and clearer and grayer, with more breathing room all around. Color is becoming a much more conscious choice, used for emphasis, instead of ambiance. Amazon must be doing a phased roll-out or A/B testing, because in Firefox i get the new version, and in Chrome i still get the old.

Red with big elements and plenty of white space.

Coincidentally, i just saw the other day that Target did a major redesign of their entire site. It’s very on-brand for them. Very designy and clean, yet fun (no capital letters) and easy. It looks more like one of their print ads or TV commercials now, instead of just a web store. I don’t shop Target.com often, so i’m less familiar with the changes, though i definitely did notice that it was new when i visited last week. They even made a little video to show it off.

Update: Apparently, Target’s redesign is a complete relaunch of their entire web store presence in order to be independent of Amazon.com who previously ran their e-commerce services. That explains the “reset your password” links on their new homepage. I had no idea that Target’s redesign was related to Amazon when i started writing this. It was just an ironic coincidence that i noticed both their redesigns this week.

*That’s a reference to the trend in films to color grade everything severely orange and teal.

Refillable toast-shaped post-it dispenser.

Outstanding. Beautiful unity of information and graphic design.

If i start now, i might have something almost as stunning by 2010 the time my flying car comes in.

[via Veerle's blog: Approved]

The hack originated as a way to get the old Go button to match the other toolbarbuttons in my theme. I then began using it as a way to dynamically increase button sizes when space was available, according to Fitts’ Law of interaction design (bigger targets are easier/faster to hit).

That’s why i love stopping by sites like Joe Clark’s fawny.blog [via]. So much going on typographically. He lets the words speak. He literally puts more meaning into one paragraph than i don’t even know how to finish this analogy. Somehow so visually appealing, yet nary a graphic in sight. His stylesheets list over a dozen acceptable font faces so if you happen to have one of those fonts installed on your system, the page is rendered using that face instead of one of the boring standards. Well done. Forget Web 2.0. Here’s to over-populated font sets.

From CARGO magazine “Fashion Trends… Medallion Ties,” December/January 2006.

Yeah, so i guess they’re called medallions.

Another example of the web variant has been in use at Dell.com:

[via]