Whether you’ve been tasked with overseeing a new website build, or you’re simply trying to inject new life into an existing site, it’s handy to have an idea of where the benchmark stands before you start. In this three-part series, we’ve rounded up some of the design and UX trends you should be mindful of when you’re planning your next web design project.
Goodbye static design
Expect to see a lot more movement in websites throughout 2019. New technology and standards (once cordoned off and labeled ‘experimental’ and ‘unstable’) have become available to almost all desktop and mobile web browsers, opening the door to interfaces that are both exciting and usable.
From the scene that springs to life as you scroll down the page, to subtle feedback and micro interactions in response to a user’s action, purposeful motion creates a sense of vibrancy and participation, transforming the repetitive and endless scrolling your users are so used to into a unique experience.
Branded animation
Slumber App by Tubik
The initial impression of SlumberApp is of something very minimal. It’s simply typography and photography, right? Wrong.
Some very fine details are working together here to build this sense of elegant minimalism; the custom images, the clear and very easy to read typography, the restricted colour pallette. However the biggest part of this interface’s personality is the animation.
Note the gentle, almost dreamy way the titles waft over the images on the cards as the user scrolls. Not enough to distract, but just enough to leave that tranquil impression.
The transition when a card is selected is also of note. The title and image are retained, reinforcing to the user which item was selected, while the content comes in from underneath.
This is a great example of animation reinforcing a brand personality. When your product is all about restful sleep, you want your interface to reflect that. It’s not enough to pop in a few generic cross fades, parallaxing or sliders into your interface. Think of animation as a brand component, like you would your brand colours, or typography. The animation you use should reflect YOUR brand in motion.
This animation gives the user a look at three sides of the kayak while adjusting to fit in better with its content. This one is also possibly a wait time distractor.
We’re also seeing ripples of the water, both passively in the texture but also as the kayak moves around. And bonus, the ‘sand’ under the water features what we think is the logo of the store; animation literally reinforcing brand values.
Object permanence
Animation can play a very functional role in interface design. Note how in the above, the segments of the pie chart animate to their corresponding elements in the bar chart. The standard way to do this would have been to simply switch views with no transitioning, but then we would lose the visual connection between the pie and the bar. This animation is key for the users’ perception of continuity.
Motion can also disguise wait times. Watch when the user selects a purchase item to see more information about it. This app could be connecting to a server and fetching that information while all the interface elements are sliding up into place, giving the impression that there was no loading at all.
We have the technology
The ubiquity of most trends hinges on their accessibility, and this one is no different; CSS has included the capacity for animation since 2011, but an understanding of movement was not an intrinsic skill to neither developers nor designers. Without an understanding of how things should move, or if things should move at all, and software that only really supported static designs, the uptake was slow.
Both the development and design fields have been embracing motion eagerly as it’s likely linked to animation being a signal of a premium design – even (or especially) to laypeople. Historically it’s been difficult to make movement look right in the context of an interface, so when it works, it’s impressive.
We’re seeing both designers and developers develop their motion skills now thanks to more software that allows visualisation and development of motion. This refinement is circular. A better eye for motion means more complicated requests from the technology which means the development of better software and better specifications. We’re also seeing more and more animation libraries that are making well timed animations accessible to more people.
All of this means that motion in interface design isn’t going anywhere and will continue to mature as technology advances. Its moved from a premium nice-to-have, to a mandatory aspect of interface design, user experience and even branding. Expect to see it everywhere, from enhancing the banality of ordering pizza and selecting insurance to managing your Ethereum.
Cryptocurrency CRM Tino Design
Up next
This is the first of a three-part series where we look into visual and user experience trends to expect in 2019. Check out our next instalment, where we look into the colour, layout and typography trends you're going to be (or you're already) seeing everywhere this year: Part II – Bold visual styling.
Want to take the design of your site to the next level?
Let's talk!Keep Reading
Want more? Here are some other blog posts you might be interested in.
