Want to give your website a little modern sparkle and pizzazz? These three ways to add movement to your site design will give your website that extra “wow factor” users will love.
“That Modern Sparkle”
Sometimes a new client at my web design studio will make a request akin to the following: “I want to make sure my new website has that modern sparkle – do you know what I mean? I want it to have that extra finishing sheen.”
Although these clients often have a difficult time making this request highly specific, when I hear these words I know exactly what they mean.
“Oh yes,” I’ll reply. “I know just the thing.”
Movement Makes All the Difference
What is the difference between a perfectly fine website that is well designed, displays clear messaging, and features strong call-to-actions – and one that really sparkles?
Often it comes down to MOVEMENT. While the one website may have done everything “right,” in the end it’s still laying statically on the page while the other has found a way of “coming to life.”
The following three effects, when employed on a website, can give it that extra luster you’re looking for.
Parallax Images are background photos on a website that, when a user scrolls up or down, move at a different speed than the rest of the website content, creating a cool effect.
Parallax is a great (and easy) way to add some movement to your website design.
Even if they don’t consciously realize it, users typically expect something visual to happen when they hover over an active link (i.e. an element that when clicked will take them to another page). Often this visual change is as simple as text or a button that changes color when a user hovers over it.
But changing color is just the beginning of hover effects, and it only gets better from there. When hovered over, clickable elements can grow, shrink, wobble, pulse, or just about anything else you can think of!
I’ve always loved this library of hover effects. It shows that the sky is the limit.
Animation of Elements
When most people think of animation, they think of an animated short or feature film (and hey, if you have the market budget, go nuts!). In the web design world, adding animation effects to your website can also include moving items into place as they load on the page. You might not have noticed it, but you’ve definitely been to websites where as you scroll down the page, items “fade” into view or perhaps “slide” or “bounce” into place. It’s a subtle and elegant but also highly effective way of adding interest and life to your pages.
To see what I mean, check out a few recent websites I’ve designed that employ these effects. On the homepage of the Cultivate Center website, elements elegantly fade into view and slide into place. And on the homepage of the Soar Aviation Law website, the two primary call-to-action buttons slide to meet in the middle, creating a unique effect.
“Too many notes, dear Mozart, too many notes.”
The above is a famous line that Emperor Joseph II supposedly spoke to young Mozart after hearing one of his early compositions. (It should be stated here that Mozart replied “Just as many as necessary, Your Majesty.”)
Movement effects are a wonderful way to bring life to your previously static website pages. They can help to stimulate and engage your viewer. But heed these words of warning: a little can go a long, long way. Beware of adding entirely too much movement to your page which will only overwhelm and overstimulate your visitors, leading them not to absorb your message and maybe leave your website altogether. As with any potent component, a little goes a long way 🙂
Want to give your website any of the above?
I love working with creatives, coaches, consultants, and other businesses with heart to take their websites to the next level. If you’re feeling an inner pull to give your website a bit more pizzazz with any of the above, reach out today! Let’s connect and explore the possibilities.
Looking for more?
If you enjoyed this blog from Janelle (that’s me!) at Ellanyze, you might enjoy these other quick reads on website design and usability.