Alejandro Torres Viera, Interactive Designer @ Suka Creative
Since the introduction of Google’s Material Design system, we’ve witnessed many independent designers begin to experiment with this visual language on their personal projects. The system’s popularity is evident in the growing collection of websites and blogs showcasing hypothetical redesigns for big brands, user interface (UI) kits and even free web templates. This influx of “material” ideas is becoming the newest digital trend. With motion design being the core of Material Design, designers are now creating immersive work using animation as the key element. However, although these motion pieces are dynamic and look cool, most are missing the point, thus failing to serve the purpose they were intended for.
The value of motion is that it can communicate anything we can think of—from the abstract to the literal—using principles like scale, orientation and rhythm. Combining this freedom with a problem-solving design approach, we can develop functional and engaging interactions that benefit the user, and our clients, instead of creating confusing and distracting experiences. This user-centric focus is what Google’s design team is trying to accomplish with the Material Design language—and something we can apply to our creative work.
I think the Material Design aesthetics are beautiful, but they seem to work solely within the space of Google’s creations. If we apply them blindly to our projects, they end up looking like Google made them. However, the greatness of Material Design comes from standardized rules that can be reinterpreted and applied freely without strict adherence to brand guidelines (go away, Brand Police!). And, unlike other design, tech or consumer companies, Google places special attention on defining a set of animation guidelines at the core of their brand. As Sarah Drasner, Senior UX Engineer at Trulia, explains in Practical Techniques on Designing Animations: “The impact of Google’s Material Design lies less with the design language itself, and more with the fact that it was the first major industry example of a company that incorporated animation guidelines in its branding. For the first time, people started thinking about the style of animation as a functioning entity that had a voice, one that must be designed in cohesion with everything else.” In short, in order to create meaningful animations, they should be conceived to align with the brand’s mission, tone and user experience we are trying to communicate.
One of the biggest challenges with UI work is coming up with ways to enhance the product’s navigation visually, by making it intuitive. It’s easy for users to get lost on a site or app and lose interest when they don’t understand where they are or where they came from. Thinking of animations as navigational guides can help replace confusion with a feeling of certainty. Transitions can point users to the information they want in a more effective manner, giving them something to engage with while moving seamlessly from point A to point B. Ultimately, our job is to make digital experiences fluid, seamless and memorable. Motion can play a big part in that.
Motion designers, and clients, should remember that animations always communicate something “more.” Any motion element we add to an interface evokes feelings related to the moving things we see every day—people, cars, TV, clouds, birds. Thus, we should be mindful of the message we are trying to communicate, and design for that. Animations should be treated as an integral part of a project by keeping them in mind from the beginning instead of adding them later to make things “pop.”
It has been said that good design is the perfect fit between form and context. I like to think of motion as the perfect fit between purpose and style. While animations should still be engaging enough to add emotional value to the experience, they shouldn’t distract the user from his/her end goal. The challenge, like in everything in life, lies in hitting that sweet spot, achieving balance. Doing so will help keep the brand’s look consistent while providing our users with immersive and moving experiences. ///