My next step was to try out colours on my wireframes to see what kind of colour scheme I was going to go ahead with. I had created my wireframes on Mockingbot, but when I tried to incorporate colour into it, it wasn’t working the way I needed it to.
The design on my app includes a background image on each screen of a relaxing landscape – and to be able to test different colours properly, I needed to make sure they would work with these different backgrounds. One of the criticisms from my prototype was that the text was hard to read on these backgrounds. To combat that, I had two choices: I could either add a white overlay on top of the image, or else blur the image. The way Mockingbot works, it was a bit harder to do this, so I quickly did them up on Photoshop as I knew it would be quicker.
As you can see, I tested it with white, black and blue. Because of the different backgrounds, I feel that there will be a lot more of black/whites and less blue so the text can be easily read. I also tested the image with a white overlay, a blurred image, and one with just the image and no effects. Since it was done quickly, I didn’t add any icons and the font is not the chosen font I want to use.
To be honest, I don’t really know which is better as it all depends on the images I use as backgrounds. I also don’t know whether to gather images that have a similar colour scheme or landscape.