This is the sixth edition of D&T Special, a more in-depth view of topics that interest the Canvs team. Today’s topic – Why motion is not just an embellishment to UI designer, but a core part of the design process.
Note: If you are new here, we’d strongly recommend subscribing to the newsletter so you don’t miss out on the future updates. You can subscribe here.
✍️ From the Canvs Research & Editorial Desk
Throughout the history of technology, creators have tried to replicate the look and feel of real-life objects. Skeuomorphism design principles are still prevalent today. Movement is a huge part of our natural world and hence humans tend to expect movement in software as well. By adding subtle transitions, a product feels alive and natural. Animation has made the web feel fluid and lively from the very early days of Adobe Flash. It is now helping product designers craft delightful experiences for users.
This week the Canvs R&E team has spent some time pondering this concept, let’s dive into some details.
Animation can play various roles in a design. From a usability perspective, animation carries a lot of weight as it can convey a lot more while taking less space. Affordance is only one of the reasons why motion is getting popular. Animations also grab user attention. Product designers can use these features and deploy animations for various uses.
Key places where motion design becomes essential:
1. Feedback and state change
Animations make it simple to depict when an action has been registered by the app. These feedbacks help the user build a mental model of the app and also gives satisfactory reassurance that the action was recognised. Similarly, animations are great to show state changes of a component. A popular example is the use of icon morphing like the following download animation.
2. Easy and intuitive navigation
Just like in movies, how camera placement and movement are used to visual space, animations can be used in products to help users with navigation. If a drawer slides up over a screen, it is intuitive to the user that it can be pulled back down. Animations like zooming in and out, sliding etc give users the spacial information of the app without much cognitive load.
3. Reinstating brand tonality/personality
Like all designs, motion is a communication channel. Animation can help company display their personality. Although it is easy to go overboard with cute animations, when managed correctly the animations can add real depth and personality to the app. Animations in the Headspace app create a mood of calmness, visually communicating the brand’s voice.
📚 What we were reading this week
If you follow any kind of design news, you would have heard about the 20 billion dollar acquisition of Figma by Adobe. The whole design community collectively went through a shock. Canvs Editorial writes.
Bangalore was the first city in undivided India and even Asia to get electricity. Last fortnight, Bangalore was flooded as the city creaked from technology and startup explosion over the past two decades. What changed?
The Belt and Road Initiative (BRI) was viewed as a Chinese conspiracy to ensnare other nations. But here’s the thing…at the end of it all, maybe the BRI isn’t actually going the way China planned?
A trove of texts between Musk and key figures at Twitter, like founder Jack Dorsey, board chair Bret Taylor and current CEO Parag Agrawal, and other casual chats with investor Jason Calacanis and even Joe Rogan.
How a Dutch fabric seller made the most powerful magnifying lens of his time—and of the next 150 years—and became the first person ever to see a microorganism.
Some highlights from the past month of D&T