Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Motion & Animation | By Parvez Ahmed, Experience Technologist

940 visualizaciones

Publicado el

Motion and animation have long been part of online experiences. From ASCII-based “video” on green screens to AOL’s “You’ve Got Mail” icon, animations have been in the repertoire of digital designers for years.

However, it was only in 2011 that the latest wave of browsers officially recognized CSS – unlocking sophisticated web animations without the restriction of a plug-in. But now, with improved browser-based animation support, shrinking screens, and more processing power, motion design is poised to become a cornerstone of the modern user experience in a way that it was not in the past.

Whether used on digital displays in venue, on desktop computers, or on smartphone apps, motion and animation are changing the user experience.

Why use animation? When done well, motion imbues an experience with functionality, as well as personality and style. Such meaningful, animated interactivity gives the user interface, regardless of platform, a competitive edge.

How, you may ask? And how will motion and animation play out over the next few years?

Written by Parvez Ahmed, Experience Technologist

Publicado en: Arte y fotografía
  • Sé el primero en comentar

Motion & Animation | By Parvez Ahmed, Experience Technologist

  1. 1. MOTION AND ANIMATIONPARVEZ AHMED
  2. 2. TRENDS AT THE INTERSECTION OF TECHNOLOGY & STORY Motion and animation have long been part of online experiences. From ASCII- based “video” on green screens to AOL’s “You’ve Got Mail” icon, animations have been in the repertoire of digital designers for years. However, it was only in 2011 that the latest wave of browsers officially recognized CSS – unlocking sophis- ticated web animations without the restriction of a plug-in. But now, with improved browser-based animation support, shrinking screens, and more processing power, motion design is poised to become a cornerstone of the modern user experience in a way that it was not in the past. Whether used on digital displays in venue, on desktop computers, or on smartphone apps, motion and anima- tion are changing the user experience. Motion provides meaning. Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design. Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent. - Google Android Design Guidelines1 1 Google. “Material Design.” http://www.google.com/design/spec/material-design/introduction.html.
  3. 3. TRENDS AT THE INTERSECTION OF TECHNOLOGY & STORY By combining these characteristics, marketers can create dynamic and compelling animations that allow for much-improved storytelling. USER EXPERIENCE Why use animation? When done well, motion imbues an experience with functionality, as well as personality and style. Such meaningful, animated interactivity gives the user interface, regardless of platform, a competitive edge. Motion design delivers this edge in three areas: EMOTION Motion can invoke and provoke deep emotional engagement with users. Subtle movements can tell sophisticated stories. CONTEXT Motion can set context. By mimicking real-world physics like gravity and inertia, designers can help users anticipate what will happen. Motion can help create a natural- feeling interface, full of digital interactions that feel spontaneous and genuine. MEANING Motion adds meaning. It allows users to acquaint themselves better with the interface and find their way around. Motion can help direct focus, as well.
  4. 4. TRENDS AT THE INTERSECTION OF TECHNOLOGY & STORY FIGURE02 Anticipation: Motion prepares the audience for the action about to occur On this hypothetical retail example, when the user taps on a tile, the tile flips around to reveal more information. The successive progression of the tile from point A to point B directs the user’s attention and hints at what is about to happen. Point BPoint A Sohowwillmotionandanimation playoutoverthenextfewyears? Experiences will be designed to use animation and motion from the start Whether designing for laptops, smart- phones, or smartwatches, designers (especially traditional web or e-commerce designers) will make much more fre- quent use of animation. However, this will not always be easy. Animation requires a new mindset. Designers moving from a traditional, “flat” website design will learn that animated experiences require design- ing in multiple, additional dimensions. One animator compared it to working with clay: the designer builds a 3-D space, and then polishes and paints it. It is a craft – an art form – that requires working with time and space. To aid the creative process, storyboard animation and prototyping animation skills will become critical. Storyboard animations will be used to capture not just the wireframe showing the before and after state, but, critically, the transition between states. Storyboard- ing the “between states” enables the design of animation, while also unlock- ing its emotional and persuasive power. And increasingly, prototyping anima- tion will now be a design process as much as a technical one. Designers are collaborating with developers during the creation of low-fidelity proofs of concept in HTML, CSS, and Javascript. These New tools allow designers, marketers, and developers to iterate and generate new ideas together. Together, these new techniques un- lock the emotion and persuasive power of animation. The best stories will use animation and motion – but you won’t notice it The more motion and animation becomes widespread, the less you’ll notice it. Instead, skilled designers will use these new capabilities wisely and in very intentional ways. By combining technological capabilities with natural movements (see Figure 1), animation allows for seamless interaction be- tween users and platforms. Exemplary transitions will stem from e-commerce websites, whose flat experiences will slowly be replaced by more dynamic experiences infused with the meaning and context provided by motion (see Figure 2). FIGURE01 Natural movements Together, storyboard animation and prototyping animation techniques allow designers to mock-up – and then actually create – animations with emo- tional and persuasive impact.
  5. 5. TRENDS AT THE INTERSECTION OF TECHNOLOGY & STORY Furthermore, more tools will follow the animated likes of Yahoo’s News Digest app, which uses subtle animation effects [such as squash and stretch (see Figure 3)] to reduce user fatigue and encourage more engagement. And as motion and animation increas- ingly affect meaning, emotion, and context, narratives will become the foci. Analogous to film, a medium built upon motion and animation, Story Systems – a key part of our Storyscaping approach – will be experienced through a blend of these technologies and narratives. Motion and animation will make huge data sets understandable and accessible Brands continue to use motion and animation to create experiences, as they have for a long time. But today, the ability to interpret and render massive datasets in real time is a major restric- tion. So far, big data has been difficult to animate in real-time, often requiring experiences to be carefully scripted or simplified. The result is less flexibility in these experiences, as well as greater difficulty in data interpretation. But technology, with faster processors and cleaner streams of data from the Internet of Things, will increasingly enable the intake of data. It will then enable real-time conversion of that data into visuals, which will in turn be better understood using motion and animation built upon the latest capabilities. Conclusion Motion design is becoming a valu- able digital asset for both experience creators and users. As designers and developers incorporate anima- tion into user interfaces, they unlock its immense potential to push the boundaries of digital storytelling and interactive experiences. And, while they are redefining what is possible in user experiences, motion and animation are reshaping the digital expectations for better marketing. FIGURE03 Squash and Stretch The Squash and Stretch function can be used in mobile tools to unmask new content with the combined effect of transition and alpha opacity. For example, when users finish reading the initial set of content, they slide up from the bottom of the feed to find more stories. A short message can be used to suggest more content. This method simplifies the “release to refresh” style and is unique in comparison to the navigation in other apps (such as Flipboard, Pinterest, or Instagram) where feeds scroll forever and exhaust users.
  6. 6. SapientNitro® , part of Publicis.Sapient, is a new breed of agency redefining storytelling for an always-on world. We’re changing the way our clients engage today’s connected consumers by uniquely creating integrated, immersive stories across brand communications, digital engagement, and omnichannel commerce. We call it our Storyscaping® approach, where art and imagination meet the power and scale of systems thinking. SapientNitro’s unique combination of creative, brand, and technology expertise results in one global team collaborating across disciplines, perspectives, and continents to create game-changing success for our Global 1000 clients, such as Chrysler, Citi, The Coca-Cola Company, Lufthansa, Target, and Vodafone, in thirty-one cities across The Americas, Europe, and Asia-Pacific. For more information, visit www.sapientnitro.com. SapientNitro and Storyscaping are registered service marks of Sapient Corporation. COPYRIGHT 2015 SAPIENT CORPORATION. ALL RIGHTS RESERVED. INSIGHTS WHERE TECHNOLOGY & STORY MEET The Insights publication features the marketing intelligence, trend forecasts, and innovative recommendations of boundary-breaking thought leaders. The SapientNitro Insights app brings that provocative collection – now in its digital form – to your on-the-go fingertips. Download the full report at sapientnitro.com/insights and, for additional interactive and related content, download the SapientNitro Insights app. Parvez Ahmed Experience Technologist, SapientNitro Detroit pahmed@sapient.com Parvez’s passion for mobile and web apps have allowed him the opportunity to collaborate with designers and developers in order to push coding as a creative medium into exciting new areas where creative technology and motion design meet.

×