When starting a new website project, one of the most common design requests I hear is, “We want our website to have a lot of movement.”
Movement is attention-grabbing and adds a certain level of sophistication to a site, so it makes sense that it is desired by organizations that are going through a website redesign. However, there is a level of complexity to this request. There are several different types of movement, and not all are appropriate for every site.
As a designer, I’m consistently looking for ways to illustrate brands in a meaningful, intentional way. At Speak, we pride ourselves on building websites that not only look nice but also accomplish our partners’ goals. We want everything on your site to serve a purpose, and movement can be an effective tool to use when it matches the tone of your mission.
So, what are the different types of movement that can be incorporated onto a site? Which type of movement will accomplish my goal? I’m glad you asked. The most used types of movement in web-design are:
- Hover Effects
- Video Backgrounds
- Transitions
- Parallaxing
Hover Effects
Definition: The appearance or behavior of a button or other control while the pointer is over it but the item has not been clicked or dragged; most often used to indicate that an item is clickable or to show labels or instructions indicating what the button will do.
Hover Effects also called rollovers, is the most common type of movement in modern-day websites because it creates a better user experience (UX). Typically a hover effect on a button or text that is linked is simply a slight change of color as to not distract from other elements of the site. Seeing this type of change on hover is almost expected today, but when the hover state varies from the norm, it can be exciting and fun for your user to find. Hover effects can be used on images, buttons, text, and more.
Primary Goal: UX
Video Background
Definition: Rather than using a static image or rotator of images, there is a video to illustrate movement and personality. These videos usually do not have sound.
This may be the most self-explanatory type of movement. Video backgrounds can be a great way to keep users on your website longer. They have the ability to powerfully communicate the tone of your brand without saying a word, effectively demonstrate what your organization does, or simply engage users with a looping video background for visual texture.
Primary Goal: User Retention
Transitions
Definition: Visual effects that animate the transition from one visual display to another.
Transitions help keep the viewer engaged as they move from one page or section of the site to the next. These changes are less abrupt and often unnoticed because of how subtle the animations are. Transitions are not meant to be eye-catching, but rather help set or reinforce the mood of your site. Too much animation can be distracting so it’s important to know your audience and what will help keep them engaged. Different types of transitions could be a fade, slide, fold, scale, and more.
Primary Goal: User Engagement
Parallaxing
Definition: The effect whereby the position or direction of an object appears to differ when viewed from different positions.
Parallaxing is the newest and most trendy type of movement in web design right now. You’ve probably noticed it on a site you’ve visited because it’s out of the norm, but didn’t know what it was called. It’s most often used to create an illusion of depth, for example when the background image throughout the site moves slower than foreground images. It can also be used in a way that is more subtle to help guide users through the site. Parallaxing can be applied to most sections of your site and because it can be done in different ways it keeps the user’s interest, therefore keeping them on the site longer. Like any type of movement, too much parallaxing can overwhelm the user, as well as their computer, but when used in the right way it can really elevate your site.
Primary Goal: User Retention
Let’s Chat Design
Speak is uniquely positioned to tackle web design projects because we’ve got an expert in each seat. Our designers work with our developers who work with our content specialists who...well, you get the idea. We work together to create a website that will effectively drive your goals forward. Are you ready to redesign your website?
Get in touch