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!”
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.
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).
4. The Subtle Highlight/ Drop Shadow
5. Switch Views
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.
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.
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.
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.
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:
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!
Looking for more tips on how to make your brand stand out? Check out our ebook, To Brand or Not to Brand.