With the rapid development of the app and web-app market, the motion design is becoming more and more important. The motion design does not only help a certain brand to unfold its character in another dimension, it also helps the user to experience the interface in much richer textures. We experience our surroundings as the time passes by in the real world, that is also how we as human learn to understand the relations between the interactions. So it is also very natural for more and more interface design driving their digital product through the motion design.
The idea of motion design is much older. Since the invention of the motion pictures, experts have spent countless days to perfect this disciplines. But it is not recently the motion design re-enter the UI design field again. There was a time when the internet is filled with motions and interaction, and also there was also the time when we are afraid of motions will pull down the product performance. But with more and more stakeholders realize that user experience is equally important as the product performance, sometimes these two holds onto each other. So, Today you will find more and more UI design deploy more deliberate motion to either enhance the user experience or to strengthen brand impact or both. This is partly because the technology for implementing motion design is becoming much cheaper and faster. This is also because of that, there are more and more emerging conventions for UI motion design now, so the motion design becomes an assistance instead of obstacles. To integrate the motion design in your next project, often you will have to prepare yourself in different approaches. Today there are several options for designers. I would like to walk through these options and talk about pros and cons.
These tools extend your static UI design with timelines and gestures. so you don’t have to spend the time to re-build your scenes. Most of the time, you can just work with your current layers. You can either export the live working prototype or export your timeline as a movie format. They are best to use when you know what kind of motion and gestures you want to explore.
Their disadvantage is also their best advantage, that is they often limit their animation to certain preset. You can write your own code and logic, but it does require you to know coding to some extent, and sometimes the designers would prefer to work with more instant feedback in the creative process.
You will gain full control over your UI motion quality, down to the last detail on how the browser will render your animation. By writing your own UI motion code, it is also easier to pair them with different logic and functionalities.
There are 2 major drawbacks to this approach.
The last approach I have been experiment recently is Adobe After Efftec(AE). It might seem an overkill to use a visual effect based program to create UI motion, but the creative freedom it offers will compensate for its learning curve. Plus, if you have been using flash for building your UI design, there are a lot of principles and tricks you can re-use in the AE. So, let’s take a look at the pros and cons of it.
However, you are not looking at the silver bullet on UI motion design, but only one piece of the puzzle.
As I said earlier, there is no silver-bullet for UI motion design currently. Neither approach is no better than the others. Each different approach mostly accommodates certain phase of the design sprint. Some are good at to visualize the concept and introducing the motion design to the clients; some are excellent when you need to lock down the last detail of the motion design; some are great to use-test and push the concept to the final production. Here are the parameters helps me to decide what approaches to take during the creative process.
For scenario A: x0 y0. I would recommend using AE because you will get the highest quality of client feedback and the best freedom to explore your creativity.
For scenario B: x1 y0. I would recommend using some of the UI motion programs, then you are both looking at some of the industry best practice and the close integration with the current UI design tools.
For scenario C: x1 y1. I would recommend to start prototype code, combine with one front-end framework. Then you can leverage most part of the framework, and ensure the best balance between performance and development speed.
For scenario D: x0 y1. I would recommend to start prototype code as soon as you can and work together with your front-end engineers. That is when you can lock down the key storyboard with the client. Because the prototype code can push the product to the final release most effectively.
As I mentioned earlier, there is no one best approach throughout the different design sprints. For the digital designer, it is part of the job to swap in/out different approaches to help drive the project forward. But for me personally, I would much prefer to find myself in scenario A, it is the most challenge on the creativity, and also offers the most possibility to elevate your UI design into a new level.
But that is not to say the micro-interaction motion is not important, sometimes, when you are sharp about your concept, they can really have a huge impact on user experience.
The motion gives UI designer an extra dimension to explore, more information need to be fed and processed than ever before; on contrary, the screen real estates is getting smaller. Therefore introducing this extra dimension to hold the information is inevitable, it channels some the anxieties caused by the information overflow. Taking the right approach in the different phase of the design sprints can both introduce fresh solutions to some of the old problems, and focus what UI design is best at. Designers don’t have to just “add more” to accommodate brand impact and more information but can arrange those design requirements to different keyframes in the motion timeline.