Groove Commerce
groove
Blog Post
Average Rating: 4.2
Votes: 5
Reviews: 5

When building websites, our Creative Team at Groove is always looking for little ways to make a big impact in our designs. Many of the items in this list are subtle nuances, making web designers like me say ”ooooh, lovely”, while others are a little more in-your-face.

1. The Amazing, Expanding Search Bar

There are plenty of awesome things happening on Snowbird’s website, but I think it’s shining glory is the enormous search bar that appears after clicking the search icon in the upper right hand corner. As search functionalities get better and better, why not make your search bar go “POW!”

Expandable Search Bar

 

Expandable Search Bar Effect

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. The Navigation Blur

I don’t know why, but I am in love with this effect. The first time I saw it I got chills….no, really. It’s such a simple, elegant way to focus in on your selected navigation without taking away from the rest of the site or over highlighting your selection. Great job, Colin G.

Blurred Navigation

 

Blurred Navigation Effects

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. Make it Move!

Skinnyties.com isn’t just a great responsive site (as mentioned in a previous blog by Groover, Derek Hargest) but it also has a lovely, subtle effect working for it. When hovering over any of the ties in the top navigation, the tie will move up ever so slightly. This effect, obviously, isn’t limited to just ties. Another great example can be seen on Colin G’s website I previously mentioned; if you scroll down on his website and scroll over his icons, they animate (yay).

Hovering

 

Hover Effect

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4. The Subtle Highlight/ Drop Shadow

I like how Quirky.com delicately places a nice, subtle drop shadow on their
modules just to say, “hey, I’m clickable, so you should click on me.” Notice I said subtle drop shadow, people.

Subtle Highlight/Drop Shadow

 

Subtle Highlight/Drop Shadow

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

5. Switch Views

This easy angle-switch hover effect is a simple way of showing your visitors more of your product with less effort on their part. Another faster version of this example can be seen here:

Switch View Effect

 

Switch View Effect

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


6. The Branch Out

If you enjoy minimalism to the max, you could try this different approach to navigation. This is an interesting navigation interpretation because it allows visitors to view only what they want to view. Just make sure any animations you implement are both smooth and quick; there are plenty of impatient users out there, and rightfully so.

Branch Out Effect

Branch Out Effect

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

7. Back to the Top!

This feature is, obviously, ideal on long pages that have a ton of content, but can be used in other, shorter instances too (see timelessdesign.com). I think it’d be a great idea for designers to implement this feature on their blogs so viewers don’t have to take more time scrolling up to get to the navigation.

7_Pinterest_new.png

7_Pinterest_Scroll_new.png

8. The Background Fade

We see this done on a lot of eCommerce websites that have a quick-view functionality on their products, but I really like Jawbone’s more innovative use of the fade. They use the background image as a banner of sorts and then, as you scroll down on the page, they use a background fade to help the viewer focus in on their other features.

Background Fade

Background Fade

9. Parallax Scrolling

For those of you who don’t know, according to awwwards.com, parallax scrolling “uses multiple backgrounds which seem to move at different speeds to create a sensation of depth (creating a faux-3D effect) and an interesting browsing experience.” It essentially gives depth to an otherwise flat page. This web design effect is fantastic if you’re looking to show off a ton of things on one page, instead of making your visitors click to other pages.

 9_Soleil12_new.png

9_Soleil12_Scroll_new.png

10. Logo Pizzazz

I will admit that this quirky effect isn’t for everyone’s website or logo. It seems to work best for single color instances, but the result is stirring and unexpected. Another great example can be seen here: 

10_WINTR_new.png

Not all of these effects are for everyone’s website, and I am certainly not endorsing the use of ALL of these on a single site. But if you’re looking for a couple new design elements to add “pizzazz” or make your visitors say “wow”, don’t be afraid to try them!

eBook_Branding_CoverDesign2.png

Looking for more tips on how to make your brand stand out? Check out our ebook, To Brand or Not to Brand.

Get the eBook