Not to suggest this website is at all attractive, but I do like how the user gets a personalized navigation drawer (“My Workspace”) that they can customize. I can see that integrating well with registration, support tickets, and product comparison. User log in can be hidden in the drawer to free up screen real-estate at the top of the page. 

Seeing “My” in the navigation invites the user to interact with something that already belongs to them (even if they don’t know what it is). It also primes them for further interaction in this box throughout the site with friendly orientation text:

Create an account to access these benefits:

• Save part pages


• Save Data Sheets and other files


• Create folders to organize your projects


• Share folders with colleagues


• Organize secure documents for easy access


• "Follow" parts to see alerts and updates

Obviously, not all of these features are appropriate for retail…

[gallery]

[gallery]

via phone arena

[gallery]

playful animation where icons jump up when you hover on them. 
makes post-types feel like buttons without compromising reading the labels across. 

Sidebar Transitions

Sidebar Transitions: Transition effects for off-canvas views

ideas for revealing the navigation menu

Sidebar Transitions

[gallery]

Guide for styling product-page specific navigation.

Scroll effects are pretty nice as well. 

hover behavior

Product In Concept

nice tab-style. 

Looks clean and neat. And I like the graphic design elements. 

However I prefer my more recent mockups since the experience feels more immersive. This feels too much like one is looking at a cut-up magazine for our purposes. Since the freitag bags are made out of recycled material that aesthetic makes more sense for them. 

line-drawings for product pages!

A quick way to characterize a line of products. 

Provides an easy mapping from one to many. Form of the bag, versus many iterations of it.

 Also note the two levels of hierarchy. Collection, then type. 

[gallery]

Secondary nav that sticks.

"Living with Nest" and "Saving Energy" both push Nest rhetoric. 

For comparing product pages side-by-side it is useful to have a uniform nav (apple style, and even MOTU style currently). 

But for these category landing pages, a uniform nav across tabs can be less of a priority.

[gallery]

Availability   |      Features     | Specifications    |    Accessories

-Stand out.

-Are the same across every product page. 

-Directly map to user tasks. 

can you say Z Axis!?

+ parallax. 

+ digging the signifier for scrolling (you can click or scroll to activate the yellow arrow).

Also like that the arrow is labeled to set the expectation of what’s next. 

If you hover over “Menu” under FK Agency you get the site navigation. 

+ color that pops 

While this is pretty hidden, animating the sun, and because it is the only other yellow object on the screen, you’re eye (and hopefully mouse) are attracted to that part of the screen. 

Drop Down animation from tumblr Organ theme.