Menu Page

Typography 

The font I'm using as my header font for all of the interface is Keep On Truckin'. Not only is this my favourite font which I'm actually getting a tattoo of with text relating to a self realisation I uncovered through meditation, it also perfectly embodies the aesthetic I'm trying to achieve, being a modern twist on meditation I want it to look appealing to younger audiences, with connotations of hippy culture this font will aid me remove the clinical aspects that many meditation apps employ. 

I'm using Helvetica as the subheading text, the font itself embodies simplicity and modernity so it definitely seems most fitting, contrasting the stylised header font it helps bring back a sense of calm and minimalism.

I've started playing around with the menu screen where the use selects their personal preference of 'Happy Place'. I originally wanted the text to be filled with imagery relating to each place, however after asking people they agreed this was too clinical, there was too much use of white space. I want to consciously avoid it looking clinical as I'm trying to deviate from example apps I've used and give meditation an aesthetic modernisation.

I feel like this second design route is therefore more suited to this issue, with use of more vibrant colours this may entice younger audiences as I aim to market this to a primarily teenage / young adult audience as this would be most valuable for this demographic, especially with the rise in mental health issues in young people, this app is supposed to eradicate the stigma of meditation being for older hippy types, and inject a more youthful accessible feel to this incredibly powerful self medicating tool.

I'm currently playing around with the alignment of the typography, I feel the last is most appropriate for the header, I got some feedback and they agreed as it looks better all on one line but thought the legibility of the subheadings wasn't so clear so I could possibly try out muted colours or outlines and so on for the text. Also the text aligned to the left has a modern feel so I'll align it back to this. 

I tried out an outline on the text but just felt there was too much going on and it didn't looks aesthetically pleasing against the colourful backdrop.

In terms of type visibility it seems to make more sense then to edit the opacity of the background banners, although this takes away from the vibrancy it makes the text more visible and another factor I wanted to avoid was having the interface too hectic, the aim obviously of meditating is to calm down so I need to keep in mind although I want it to look contemporary, it needs to have simplistic functionality. I also tried the subheadings in Keep On Truckin' (the heading font) but also felt this was too hectic, for this reason I also reduced the font size.                                         I feel this latest version is most suited as the use of banners opposed to just text gives a little more of a hint as to what the happy places will look like which may be more comforting for users and make it easier for them to choose, reducing time spent deciding which place they'd prefer so all in it's a less stressful experience, meaning people can get to meditating faster, which younger audiences will appreciate initially as often (including myself) people need to be stimulated and entertained quickly as with social media and the rise in technology we find ourselves having little patience and a high expectancy on technology to fulfil a little happiness and obsession with being occupied. The nature of this app will hopefully make those realise this isn't necessary and by enticing them in in a way that is comfortable to users' usual experience, they're hopefully pleasantly surprised they can just focus on the app as opposed to their phones, tv's, laptops and the world around them which will be encouraged through the meditation audio as well. 

I've started editing in Adobe XD, however I cannot seem to include my homepage in a video or gif format which is frustrating, I will look into a way around this and if not possible I'll just made the video separate as I want to use different video backgrounds with the spinning smiley logo gif overlaying this. Here is a brief trial of these two pages so far: