Pre-Animation Visual Design
“Final” for animation
This visual design departs from the previously created style tiles and even the one we decided to work from. The approach I took to using the style tile was very limiting; I wanted to use it as a “brush” to paint the wireframes but the tile itself didn’t really fit the feel of the app. (In all the following image sets, the three images are the first three screens in the registration workflow: the main app flow we are using in our concept video.)
Iterations
After deciding on a style tile to “paint” onto the wireframes, I struggled a lot to fit my envisioned visual design onto the feeling of the app itself.
After a lot of frustration and feeling stuck, I finally decided to move away from the style tile we had decided on, using it for inspiration but not as a rule for visual design. I played with a new concept that is more photographic. However, it made for a somewhat chaotic interface, since the form already has so many moving parts. (This is also the first stage I worked with my own icons.)
The other concept I tried (for a flat, friendly UI) ended up being the direction we decided to head in (see images at the top).
