SUMMARY OF CHAPTER 9 OF “ANIMATED STORYTELLING” BY LIZ BLAZER & UI EXAMPLES
So we have had quite a journey. Discovering Photoshop had a video timeline window – mind blown…who would’ve thunk! Getting used to key frames, creating animated gifs, then cinemagraphs, stop motion, logo stingers and now UI. Shhhhheeeeeesh, I am beat. The title of Chapter 9 is “Animate!”, and I thought, what do you think we’ve been doing all this time! In many ways, this chapter is like a recap, a few words of wisdom repeated from a mentor before their prodigy goes to a new school or begins a journey.
Here are a couple of things to remember while you are working on your next animation:
- Look at your storyboard or plan. You don’t have to do it straight away in a linear way. Start with the easy stuff and gain confidence and experience in the project that will enrich your execution when you hit the more complex scenes. Poke your toe in the pool, get used to the water, in no time you will be diving into the deep end.
- Break things up. Recently I worked on a user interface project. Tackling the whole thing would have been rough in one After Effects file. Instead I broke up each application screen into smaller Photoshop animations then brought them into AE for polish one by one. I believe this practice made the end product much better and made the animating manageable. I was able to focus on the details of just “that scene” on that day.
- Save time by spending more time planning.
- Protect yourself by backing up files. Save early and often.
- Don’t forget the 12 principles of animation. Design “Pose to Pose” and keep “Follow Through” in mind. “Pose to pose” means designing the key sections (beats) or frames first, and then filling in the intervals later. “Pose to pose” works better for dramatic or emotional scenes, where composition and relation to the surroundings are of greater importance.
- Decide on your rules and directional movement for the piece and stick to them to maintain visual consistency throughout the piece. These can be simple such as things always enter left to right or main navigations are always vertical and animate up and down. This blog entry is influenced by our recent UI project, for examples regarding directional movement see the chart below for the 12 UX motion principles.
- Frame and compose your shots well. Constantly question and evaluate the best way to present the action or inform the user.
- Same goes for audio, be flexible with your soundtrack. Allow design and sound to influence each other throughout the production in order to get the best synthesis.
- Motion blur is handy, consider mimicking natural human vision when possible.
- Sound advice…cut down render and preview time by turning off sound when you can BUT, make sure to have sound on when syncing your audio to action.
Navimation – The integration of animation into navigations, interactive products, applications and devices.
Reflections on the User Interface and its relationship to animation
The user interface is a mediating artefact that facilitates and materializes our interaction with a device, another human being or our environment.. Interfaces may be labelled as primary, secondary or tertiary. Primary and secondary artefacts are tools and representations. For example, like google glass, it can add information that is useful in comprehension. Respectively, while the tertiary artefact is one that goes beyond the practical and creates an autonomous ‘world’ of play that can colour the way we see the ‘actual’ world. The interface may be seen as a tertiary artefact that provides an environment for play and engagement. It mediates as an instrumental tool for activities such as navigation and social interaction.
Since digital information is not bound to physical location and form, the digital interface allows us to create, find, and experience information and media content in many ways. The user interface is the guide that allows navigation as interactive movement in information space. This generates associations to ways in which we find our way in the physical world, and allows for an open approach to navigation—one of exploration, discovery, serendipity and fun. Moving through a real or a virtual space may be satisfying in itself. The challenge for the designer/developer of the interface is to present information and calls to action in a way that the user will understand and is not overwhelmed or confused by the application. The screen is both a site and a result of navigation: it is a screen space in which there is a simultaneous construction and representation of navigation. It is often a design that is the mediating your interaction with another design, for example a DVD menu within a blu-ray player that is controlled by a remote.
Importantly, activities of navigation take place on both short and long timescales. Lemke introduces the term hypermodality to refer to hypertextual navigation that is combined with diverse modes of communication such as image, text and sound. This connects navigation with diverse modes of communication, including visual motion.
Technology has gone on to change the possibilities of screening images in motion, as motion now can be generated in real time as it is being screened, and in response to user action. This applies to a range of screen-based devices with or without touch-screen functions, including laptops, mobile phones, GPS readers, MP3-players and PDAs.
Getting into the weeds here on types of navigation and categories into which they fall. The three core concepts we have developed for the multimodal textual analysis of dynamic interfaces are as follows:
- Temporal navigation. This concept denotes how, at a micro level, navigation can be seen as durable and continuous. Navigation becomes topological (Lemke, 2000b), meaning that it is realised by degree rather than discrete options. In contrast, hyperlinks act as discrete and finite options when navigating traditional hypertext environments resulting in a discontinuous form of navigation. In dynamic interfaces this discrete selection can be replaced with a continuous activity of manipulating or changing the navigational progression. Think of highway signs, mileage, music tempo, time, temperature, gps coordinates….navigations representing a fixed place or physical amount.
- Spatial manipulation. This concept refers to how motion can be used not only to create and enhance a sense of two- or three-dimensional space on a screen, but also to manipulate and even distort this sensation. The screen of an interface can be seen as the viewing frame of a virtual camera (Jones, 2007), with the user looking into a virtual space framed by the screen. We do not see the camera itself, but when we are presented with a virtual environment seen from a certain point of view, we might assume that there is a virtual camera at play. The notion of a virtual camera reflects the way that real film cameras have traditionally been used to frame images in motion, i.e., through zooming, panning or using a dolly (Zettl, 1990). At a different layer, the interface—and its screen—is placed in the context of a real physical space. This context may also affect the way the virtual screen space is perceived, as the users themselves also might be physically moving. Thus, the sensation of space can be manipulated and distorted not only on the screen itself, but also in relation to a physical context.manipulating visuals to offer choices, information, options.
- Motional transformation. Drawing on Woolman (2004), we see that transformation involves the changing of some inherent feature of an element or elements in the interface over time. These changes might take place in colour, transparency, size, position or shape. This is one of the core features and unique possibilities of animation and motion graphics, in which elements can gradually be transformed. This transformation can be reductive, elaborative, or distortive (Woolman, 2004). Transformations are often a complex mix of these variables, and can be more or less predefined by the interface designer. Related terms that are already in use in the interaction design profession as well as in computer animation and motion graphics are ‘shape transformation,’ ‘transition,’ ‘image morphing’ and ‘tweening’ (inbetweening).
5 examples of Great UI
1. National Portrait Gallery – Presidents Interactive Kiosk, Washington D.C.
This weekend, I went to the National Portrait Gallery and found this amazing interactive kiosk installation. There was about a 30″ touch screen in the middle of the gallery and it featured information on all the pieces in the exhibit, historical information and other items. It blew my mind, it had a 3-D timeline where the user feels like they are traveling through space to different years for each presidency. I have a video of it and will upload it as soon as I get a chance.
2.Finance app animation design by Gis1on on Jan 6, 2018
3. Display of “stock” works-3 by Musikkkkk for Redscarf on Dec 3, 2018
Lots of information in a tiny space. Feels powerful and uses zoom effectively.
4. BATB 11 Mobile Concept by Nathan Riley for green chameleon on Dec 6, 2018
Beautiful multi-layered animation for products but consistent and simple to navigate.
5. Nike Online Store Item Display and zoom image interface
I love the way Nike has set up its online shop. The zoom is simple, always scales nicely to your device, animates in and animates out. It clears everything off the screen except the image. I like it alot better than the amazon type zoom, which opens in a lighbox and forces the user to scrioll on over size images. It is brilliant in its simplicity, just a simple “X” in the top right corner to close.
Check it out here: https://www.nike.com/t/air-jordan-5-retro-mens-shoe-VQlPcb
Top image/ Featured image: Animated gif of Apple Watch Pattern Library by Hanna Jung
Shawn is an Information Technology manager in Washington D.C. and a graduate student at Quinnipiac University pursuing his masters in Interactive Media and Communications.
Willenskomer, I. (2018). Creating Usability with Motion: The UX in Motion Manifesto. Medium. Retrieved from https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
Navimation: Exploring Time, Space & Motion in the Design of Screen Based Interfaces. (2018, December 09). Retrieved from http://ijdesign.org/index.php/IJDesign/article/view/622/284
dontclick.it. (2018, December 09). Retrieved from http://dontclick.it
Ideum. (2018). Digital Exhibits Bring Interactive Exploration to National Portrait Gallery. Ideum – exhibit design | touch tables | interactive exhibits. Retrieved from https://ideum.com/portfolio/smithsonian-national-portrait-gallery-interactive
Blazer, L. (2016). Animated storytelling : simple steps for creating animation & motion graphics. San Francisco, CA: Peachpit Press.
Recent Posts from the Graduate Series:
- Motion Across Media: The Final Project- Production Notes: "Back To School" Production Notes: This is a non-linear piece. A compilation of various projects I…
- Just Get Out There and Do It- SUMMARY OF CHAPTER 10 OF “ANIMATED STORYTELLING” BY LIZ BLAZER & UI EXAMPLES Over the past few months I have…
- UI Design/Navimation – The Jingle Jammer- The Jingle Jammer Device Mock up Production Notes: When I first received this assignments I didn’t get it.…
- Principles of Animation- Learning How to Imitate Life - Principles of Animation This week we were asked to do some searching and find at least…
- SRA Logo Stinger- Production Notes: I designed the Soccer Revolution Academy www.soccerevolutionacademy.com logo in 2010. They have been a long time…
- Sweat the Technique- SUMMARY OF CHAPTER 8 OF “ANIMATED STORYTELLING” BY LIZ BLAZER Up to this point we have done a lot of…