I spent the day transforming my wireframes into mockups that showed pretty much exactly what my app screens will look like.
First, I started with the home page. As I had mentioned in the wireframes post, I had two separate ideas for the home page. I decided to design both of them to see if it would help me decide which way to go (but..it didn’t.)
HOME – First concept:
The home screen of the app opens up with the step-by-step feature that helps stop a panic attack (the main feature of the app).
Or.. the app starts with a How are you feeling? question – you choose what way you’re feeling, and exercises for each different category are given to you, based on the mood you’ve chosen, with the Panic feature listed with all the others.
Below are the steps that will be given to a user when they press “start” to help relieve their panic attack.
I created the main screen for the Breathing Exercises, as well as an example of a breathing exercise that may be included in the app.
The relaxation screen shows the different relaxation methods based on simplicity, anxiety or stress and also has an example
Following the same idea as the Relaxation screens, the thinking screen shows the different thinking exercises based on simplicity, deepness or positivity and also has an example
Overall, I am happy with how it looks. I wasn’t originally going to use pictures as backgrounds but once I tried it, I couldn’t go back because they just looked so good and relaxing. I decided to have different background images for each different feature. All these images are free to use and were gotten from Pixabay.
The logo I used in the mockups is not the final logo – just put it in there for demonstration purposes!
As for the colours, I went with the purple colour palette I had created. I chose purple as it’s a nice colour, it represents strength and wisdom, brings balance and feel inner peace and also creates a peaceful environment. As well as that, I haven’t seen purple used much in related apps that I have researched! I had to change between the 5 colours on the palette for headings and text based on the background image I had selected.
The two fonts I went with were Raleway (Bold) for the headings and tab menu items and Roboto (Light/Regular) for paragraphs and descriptions.
Next step is to bring these into InVision and create a working prototype!