We took a workshop about prototyping in QT environment since our engineers were developing in QT. Fortunately, I learned QML through this process which is very similar to HTML. However, in the beginning, to present the concept to the team, I choose Priniple and After Effects.
by After Effects
Check Web Style Guide (Open in a new tab is recommended)
I led the design workshop for this project. Prior to the design workshop, I prepared all the material including trend research, moodboard, interaction framwork, initial visual exploration, interaction concept and motion graphic.
As I mentioned before, first key challenge is that we do not have any design language to follow. What's more, the sreen size is very unqiue. So I start my initial Exploration. Basic questions like whether to use icon, how big the font should be, which background is compatible with black glass is considered.
"Material Design" Language: Judged to be not suitable to this screen size.
Icon Based: Judged to be old and main-stream.
Circular Element (time control | temperature): Judged to be old and main-stream.
Circular Element: Judged to have usability issue(not big enougn size for rotation).
"iOS10" UI: Big Bold
Border Animation + Wave
Opacity + Type in effect
Motion graphic is not there just for cool, it is there for a purpose. In addition, we realize micro interaction as a big trend through research.
After Effects Trapcode