Design for Screen - Splash screen

To start off the app visuals, I decided to develop the splash screen which would then set up the initial layout and visuals for the rest of the app design. 

The aim was to flash through the colours in the colour scheme and then take the title and move it up to the top of the screen gradually in order to represent a sunrise ready for the log in screen to be displayed and for the title to then sit at the top of the screen as a consistent visual throughout the whole app. 

I started by taking the 4 colours from the palette and having them in block with the idea that they would flash through once and then end on the white home screen with the logo in the centre. A problem with this design is that the user is not instantly reminded by the name of the app when it is initially launched. This may cause them to think that the app may not be working and without a build up to the logo, it will appear too sudden and without purpose. 

I then added the title across the middle of the screen as most app screen splashes open up with the logo or an image in the centre. As the screen colours are ordered in the same way as that of the letters, the animation of this will make the letters appear to individually flash as the app loads up.

In order to represent the sunrise focus that the apps identity relies on, the title will gradually raise up to the top of the screen, reenacting a sunrise movement. The login screen will then open up and the user will be able to enter their details in order for them to access their personalised content within the app. The title will then stay in that same position on every page of the app interface, ensuring consistency throughout. 

Adobe Photoshop frame animation

Using the software skills I learnt form the animation in photoshop workshop, I was able to animate the splash screen to log in process when the app is opened. The process was that I had to set up a frame animation document in photoshop, placing the designs onto the prototype screens of Apple iPhones. Figure 1 shows the first colour of orange which will then change through the 3 other colours before it then reaches the white screen. I then took the first white screen (figure 2) and duplicated it so that I could individually move the title up to the top of the screen (figure 3) where it will be placed throughout the whole of the app. To animate this in a smooth way and without the animation being too long, I tweened the two different frames focusing only on the placements and set it to 24 extra frames of movement in between which would ensure that the movement process would be smooth.

When watching the animation back it seemed to take too long to reach the top of the screen, something that as a user I would not want to wait for. When using a phone app, you want it to load up as quickly as possible. To resolve this problem I will reduce the amount of frames it takes for the title to move to the top of the screen and try to speed the overall animation up.

fig. 1

fig. 2

fig. 3