A typical website design pattern is "large logo, hero graphic, and prominent navigation on the homepage, minimized logo/hero/navigation on secondary pages." But when a site is only one page, that transition gets tricky, because you don't have a page refresh to provide a cover for the transition. The animation between a maximized and minimized view of the logo/nav is a clever—and depending on your perspective, elegant—solution to the problem.

See also: thisisthebrigade.com

And, you know, what Phil said.

I like the transition. I also like sprinkles more than your average dude.

Specific to this instance:

If you're looking to get to a smaller nav strip on scroll, you need to transition to it somehow and it might as well be cool or delightful, rather than abrupt.

Animation can be helpful to draw attention to a new fixed element on the page, which suddenly looks different because it's been minimized. This is especially the case when the hamburger menu icon is suddenly introduced. This specific instance happens to be a little more flourished, but it beats any of the other approaches I've taken in the past.

In general:

I like when items like this are implemented with benefits attached, without getting in the way of the message or comment.

I adore surprise and delight, it's what makes the web different than print. The interactive element of the web is not just a simple "click" and "progress" action, but also a "do" and "reward" action.

Obviously caution is necessary - you don't want to distract from the intent of the site itself. A site like whitehouse.gov may not be the best place to "sprinkle" an overload of delight (though I'd love to see Obama pop up at the bottom and say "Clever Girl")

I hope to build more and more "surprise and delight" elements within ChoreMonster (as specifically catered to that purpose).

In general, I like and agree with this treatment. I have a couple similar projects in the hopper where I felt something of this nature was appropriate. The thing I struggled with tho' in tackling this problem, was just how much animation was appropriate.

In the case of The Dream is Now, I actually feel like there is too much going on and I get distracted by all of the animation—size of logo, position of logo, position of nav links, height of nav, background color of nav, styling of button. Animation overload, IMO.

I really love the simplicity of The Brigade example a lot more—simply logo size and height of nav. Arguments could be made for others, but they're a lot more smooth.

ashford-ashford.com is another great example.

Good points Bryan. I like that Ashford Ashford example a lot. Seems just right.

Animation can be very tricky. So easy to have too much of it, or have it get in the way of the experience (especially the longer it takes).

I think you might be right. That (The) Dream is Now animation might be overloaded a bit.

I am a fan of the animation, obviously since I tweeted it. The fact that it animated actually kept me on the page for much longer than I probably would have stayed. I don't think this is here nor there though, as I am not the common web surfer. I digress.

Superfluous, perhaps, but not to the point of being "too much". I think the animation itself is a sign of details—and details, IMHO, are what makes a great design.

I would agree with Noah - When we were designing the Brigade site, we had a clean design, but wanted to add extra interaction details for the user. What's interesting to me is that the navigation transition and other interactive touches have been the bits we've gotten the most positive feedback on.

Those touches are fun but they do seem to add a level of engagement. Looking at our site, I realize that without all of those touches it wouldn't have been as successful, or at the very least much more forgettable.

To take a purely practical stance, if there is time in schedule and money in the budget, why not?

In this case, the logo/nav header really should resize slightly on scroll in order to avoid becoming intrusive to the reading/watching experience. Since we're resizing (and snapping to top) anyway, if there is time/budget available to visually enhance this transition and if the animation fits with the rest of the interaction design, for me it's hard to make an argument against it.

Adding to the issue of subtlety. The header animation itself seems just right to me in terms of movement. However when teamed with the rest of the movement below (the video mosaic in particular), it's not so clear cut.

I'll play the dick, but honestly while this is cool (as RWD is cool) it's also design masturbation. Of course your audience matters, but unless it's a site for designer/developers it's mostly superfluous and ancillary to the 80% of user experience.

I don't know if it's design masturbation. The web is a really interesting place, and different solutions arise for different problems. If the header is designed with a larger logo or nav, and a fixed nav is desired, that will have to change. Rather than throwing out the baby with the bathwater and not having a nice header, you can use both.

I feel it's reminiscent of reading a book (I know, it's the web not print, but hear me out): You have a Chapter title that's larger at the start of a chapter, with is then referenced in the running head or folio in the rest of the chapter. You can't always have the title displayed in a large fashion on every page.

One of the most important things I have to constantly remind myself of is that the web isn't designed to be homogenous. We talk about standards, best practices, etc., but one of the best parts of the web is that people create vastly different experiences that yield different types of pleasure, information, etc.

Fact is, I loved the little detail. But it didn't ingratiate me further to the purpose of the website. As a designer, it delighted me. As a customer, it didn't do much.

Another note: Yesterday, it was autoplaying video interviews. Today, that seems to have stopped. Three cheers for whoever made that decision.

Totally agree Charlie. Delight needs to focus on the audience.

I was annoyed that I couldn't click/select a video to play, that they happened without my input (not to say it's like MySpace audio playing, but it sorta was if you closed your eyes).

On the project I'm currently working on we wanted a way to draw attention to a core action on the iOS app. We've come up with a nice interaction where it transfers from the scroll view to the header. There are pros and cons to the approach we took, we definitely could have left it out.

But designers should be looking to come up with new solutions and interactions for everything. Most things we take for granted now, originated as a delighter.

Also, I believe generally design of websites has massively improved in the last few years. This means a well designed website isn't enough now. Little details like this show attention has been paid and can make a site standout for it.

One reason I consider the role of delight in design to be so vital is that, if done well, it can do the opposite of what friction does. Delight “greases the skids,” so to say.

If it’s true that we use something more when we enjoy using it, then it’s also fair to say a little bit of delight can go a long way in increasing usability. Because it brings a positive emotion, delight in design encourages use and engagement.