Random Weather Animation Art Design

Introduction:

The design of random weather contains sample animation examples, weather animation display and border colour change demonstration.The main purpose of Border colour change animation is to show the effect of different weather conditions on the outer border of the interface, thus demonstrating the 'Random Event'.As an example, when the weather changes from Sun to Rainy, the outer border changes from the original white to light blue, the change in border colour corresponds to the change in weather.This is the introduction of the random weather animation.

Sample animation example：

I used Piskel, to complete this week's animation. As a first sample reference piece, I started by creating a Potion Sprite, which animates a medicine bottle that decreases in liquid over time until there is no more liquid in the bottle.

Weather icon animation:

Weather:Sunny

This is a sunny day, when the colour of the border changes from the initial white to red to correspond to the change of the sun.

Weather:Moon

It is night time and the colour of the border changes from white to light blue and then to dark blue, using cooler tones to correspond to the night.

Weather:Rainy

This is a rainy day and the border changes from white to blue, corresponding to the colour of the rain.

Weather:Snowy

It is a snowy day and the dominant colour of grey is used to show this change in weather from normal to snowy.

Test plan User testing was conducted using a user think-aloud. The results showed that the original snow animation was too similar to the rain animation so it has been changed. Additionally, the frame rate of the animations were too fast for users to distinguish what the animations were depicting and have been changed to a slower rate.